<template>
  <div class="background">
    <div class="alert">
      <div class="title">
        {{title}}
      </div>
      <div class="buttons flex-center-x">
        <span class="cancelButton" @click="actionClickCancel" style="height: 40px; line-height: 40px; text-align: center; flex:1;">
          取消
        </span>
        <span class="okButton" @click="actionClickOk" style="height: 40px; line-height: 40px; text-align: center; flex:1;">
          确定
        </span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" rel="stylesheet/scss" scoped>
  .background {
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000000;
    background-color: rgba(0,0,0,0.6);
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;

    .alert {
      background-color: #ffffff;
      border-radius: 10px;
      -moz-box-flex: 1;         /* OLD - Firefox 19- */
      width: 20%;               /* For old syntax, otherwise collapses. */
      -webkit-flex: 1;          /* Chrome */
      -ms-flex: 1;              /* IE 10 */
      flex: 1;
      margin-left: 50px;
      margin-right: 50px;
      overflow: hidden;
      .title {
        padding:0.6rem 0rem;
        font-size:0.24rem;
        color:$color-1;
        background:#f1f1f1;
      }
      .buttons {
        font-size:0.3rem;
        .okButton {
          background-color: $color-red;
          color: #ffffff;
        }
        .cancelButton {
          background-color: #ffffff;
        }
      }
    }
  }
</style>
<script>
  export default{
    data(){
      return {};
    },
    props: {
      title: {
        type: String,
        default: function () {
          return '';
        }
      },
      okCallback: {
          type: Function,
        default: function () {
          return () => {};
        }
      },
      cancelAlert: {
          type: Function,
        default: function () {
          return () => {};
        }
      }
    },
    methods:{
      actionClickOk: function () {
          if (this.okCallback){
            this.okCallback();
          }
      },
      actionClickCancel: function () {
        if (this.cancelAlert){
          this.cancelAlert();
        }
      }
    },
    components: {}
  }
</script>
